import { useMemo } from "react";
import * as echarts from "echarts";

// 通用图表配置Hook
export const useChartOptions = () => {
  // 通用图表样式配置
  const commonChartStyle = useMemo(
    () => ({
      backgroundColor: "transparent",
      textStyle: {
        color: "#000000",
        fontSize: 12,
      },
      axisStyle: {
        axisLine: { lineStyle: { color: "#5a7a9a" } },
        axisLabel: {
          color: "#000000",
          fontSize: 12,
          fontWeight: "bold" as const,
        },
        splitLine: { lineStyle: { color: "#2a4a6a", type: "dashed" as const } },
      },
    }),
    []
  );

  // 柱状图配置生成器
  const generateBarChartOption = (data: {
    xAxisData: string[];
    seriesData: { name: string; data: number[]; color: string }[];
    legendData: string[];
  }) => ({
    backgroundColor: commonChartStyle.backgroundColor,
    tooltip: {
      trigger: "axis" as const,
      axisPointer: {
        type: "shadow" as const,
      },
      textStyle: commonChartStyle.textStyle,
    },
    legend: {
      data: data.legendData,
      textStyle: {
        color: "#000000",
        fontSize: 13,
        fontWeight: "bold" as const,
      },
      top: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category" as const,
      data: data.xAxisData,
      axisLine: commonChartStyle.axisStyle.axisLine,
      axisLabel: commonChartStyle.axisStyle.axisLabel,
    },
    yAxis: {
      type: "value" as const,
      axisLine: commonChartStyle.axisStyle.axisLine,
      axisLabel: commonChartStyle.axisStyle.axisLabel,
      splitLine: commonChartStyle.axisStyle.splitLine,
    },
    series: data.seriesData.map((item) => ({
      name: item.name,
      type: "bar" as const,
      barGap: 0,
      data: item.data,
      itemStyle: { color: item.color },
    })),
  });

  // 折线图配置生成器
  const generateLineChartOption = (data: {
    xAxisData: string[];
    seriesData: {
      name: string;
      data: number[];
      color: string;
      areaColor?: { start: string; end: string };
    }[];
    legendData: string[];
  }) => ({
    backgroundColor: commonChartStyle.backgroundColor,
    tooltip: {
      trigger: "axis" as const,
      textStyle: commonChartStyle.textStyle,
    },
    legend: {
      data: data.legendData,
      textStyle: {
        color: "#000000",
        fontSize: 13,
        fontWeight: "bold" as const,
      },
      top: 10,
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category" as const,
      boundaryGap: false,
      data: data.xAxisData,
      axisLine: commonChartStyle.axisStyle.axisLine,
      axisLabel: commonChartStyle.axisStyle.axisLabel,
    },
    yAxis: {
      type: "value" as const,
      axisLine: commonChartStyle.axisStyle.axisLine,
      axisLabel: commonChartStyle.axisStyle.axisLabel,
      splitLine: commonChartStyle.axisStyle.splitLine,
    },
    series: data.seriesData.map((item) => ({
      name: item.name,
      type: "line" as const,
      data: item.data,
      smooth: true,
      lineStyle: { color: item.color, width: 2 },
      itemStyle: { color: item.color },
      areaStyle: item.areaColor
        ? {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: item.areaColor.start },
              { offset: 1, color: item.areaColor.end },
            ]),
          }
        : undefined,
    })),
  });

  // 饼图配置生成器
  const generatePieChartOption = (data: {
    seriesName: string;
    legendData: string[];
    seriesData: { value: number; name: string; color: string }[];
  }) => ({
    backgroundColor: commonChartStyle.backgroundColor,
    tooltip: {
      trigger: "item" as const,
      formatter: "{a} <br/>{b}: {c} ({d}%)",
      textStyle: commonChartStyle.textStyle,
    },
    legend: {
      orient: "vertical" as const,
      left: "left" as const,
      textStyle: {
        color: "#000000",
        fontSize: 13,
        fontWeight: "bold" as const,
      },
      data: data.legendData,
    },
    series: [
      {
        name: data.seriesName,
        type: "pie" as const,
        radius: "70%",
        center: ["60%", "50%"],
        itemStyle: {
          borderRadius: 5,
          borderColor: "#1a1a2e",
          borderWidth: 2,
        },
        label: {
          show: true,
          formatter: "{b}\n{c} ({d}%)",
          color: "#000000",
          fontSize: 12,
          fontWeight: "bold" as const,
        },
        data: data.seriesData.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color },
        })),
      },
    ],
  });

  // 雷达图配置生成器
  const generateRadarChartOption = (data: {
    indicator: { name: string; max: number }[];
    seriesName: string;
    seriesData: { value: number[]; name: string; color: string };
  }) => ({
    backgroundColor: commonChartStyle.backgroundColor,
    tooltip: {
      textStyle: commonChartStyle.textStyle,
    },
    legend: {
      data: [data.seriesName],
      textStyle: {
        color: "#000000",
        fontSize: 13,
        fontWeight: "bold" as const,
      },
      top: 10,
    },
    radar: {
      indicator: data.indicator,
      axisLine: commonChartStyle.axisStyle.axisLine,
      splitLine: { lineStyle: { color: "#2a4a6a" } },
      splitArea: { show: false },
      axisLabel: {
        color: "#000000",
        fontSize: 11,
        fontWeight: "bold" as const,
      },
    },
    series: [
      {
        name: data.seriesName,
        type: "radar" as const,
        data: [
          {
            value: data.seriesData.value,
            name: data.seriesData.name,
            itemStyle: { color: data.seriesData.color },
            lineStyle: { color: data.seriesData.color },
            areaStyle: {
              color: `rgba(${hexToRgb(data.seriesData.color)?.r || 93}, ${
                hexToRgb(data.seriesData.color)?.g || 168
              }, ${hexToRgb(data.seriesData.color)?.b || 255}, 0.3)`,
            },
          },
        ],
      },
    ],
  });

  // 辅助函数：将十六进制颜色转换为RGB
  const hexToRgb = (hex: string) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
      ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16),
        }
      : null;
  };

  return {
    generateBarChartOption,
    generateLineChartOption,
    generatePieChartOption,
    generateRadarChartOption,
  };
};
